<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>hls.js</title>
    <link rel="stylesheet" href="./index.css">
    <script src="hls.js"></script>
	<!--
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
	-->
  </head>
  <body>
	<input id=url type=text value="http://localhost:8080/stream/cam01/index.m3u8" style="width:660px;"/>
	<input type=button value="play" onclick="play()"/>
	<br>
    <video id="video" controls style="width:640px;height:480px;" playbackRate='1.2'></video>
    <script>
	var Hls = window.Hls;
	Hls.xhr.beforeRequest = function (options) {
        var token = JSON.parse(localStorage.getItem("UserAuthenticated")).Token;
        options.headers = options.headers || {};
        options.headers.Authorization = 'Bearer ' + token;
        console.log('options', options);;
        return options;
    }
	//var url = 'http://weblive.hebtv.com/live/hbys_bq/index.m3u8'
	function play(){
	var url = document.getElementById("url").value;
 
	if (Hls.isSupported()) {
		var hls = new Hls();
		hls.loadSource(url);
		hls.attachMedia(video);
		hls.on(Hls.Events.MANIFEST_PARSED, function () {
			video.playbackRate=1.5;
			video.play();
		});
	} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
		video.src = url;
		video.addEventListener('canplay', function () {
			video.play()
		});
	}
	}

	</script>
  </body>
</html>
